<template>
  <div class="XIAngQIng">
    <van-icon name="revoke" size="40px" class="left" @click="$router.go(-1)" />
    <van-icon
      name="share-o"
      size="40px"
      class="right"
      @click="showShare = !showShare"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="i in gallery" :key="i.id">
        <img :src="i.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <p class="p1">{{ name }}</p>
    <p class="p2">{{ goods_brief }}</p>
    <h3 class="qian">￥{{ sku.price }}元</h3>
    <h2>商品参数</h2>
    <div class="padd">
      <ul v-for="item in attribute" :key="item.id">
        <li>{{ item.name }}{{ item.value }}</li>
        <!-- <span>{{ item.value }}</span> -->
      </ul>
    </div>
    <h2 class="xq">产品详情</h2>
    <div class="imgs" v-html="goods_desc"></div>
    <!-- 常见问题 -->
    <h2>常见问题</h2>
    <div class="wenti">
      <ul>
        <li v-for="i in issue" :key="i.id">
          {{ i.question }}
          <hr />
          {{ i.answer }}
          <hr />
        </li>
      </ul>
    </div>
    <h2>相关产品</h2>
    <div class="xiangguan">
      <ul v-for="i in goodsList" :key="i.id">
        <img :src="i.list_pic_url" alt="" />
        <p>{{ i.name }}</p>
        <li>{{ i.retail_price | formatMoney }}</li>
      </ul>
    </div>

    <!-- 加入购物车的底部菜单 -->
    <van-goods-action>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="goodsCount"
        @click="$router.push('/gwc')"
      />
      <van-goods-action-button type="warning" text="加入购物车" @click="GOU" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品规格弹窗 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      ref="myref"
    />
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>

<script>
// 引入获取详情页的接口
import { getDetail } from "@/utils/http";

// 引入加入购物车的接口
import { GoJiaRuLogin } from "@/utils/http";

// 引入获取商品数量的接口
import { GoSHuLIAngLogin } from "@/utils/http";

// 引入详情的最下方获取相关产品的接口
import { getXIAngGUanDetail } from "@/utils/http";

export default {
  name: "XIAngQIng",
  data() {
    return {
      gallery: [], //轮播图
      // info: {
      //   name: "", //标题
      //   goods_brief: "", //叙述
      //   goods_desc: "", //返回的html标签
      //   retail_price: 0, //价格
      //   list_pic_url: "", //sku展示图
      //   goods_number: "", //库存
      // }, //产品信息
      attribute: [], //产品参数
      issue: [], //常见问题

      show: false, //是否显示规格面板
      sku: {
        tree: [],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
      },
      goods: {
        //商品信息对象
        picture: "", //商品展示面板上的图片
      },
      goodsId: "", //当前商品信息的id
      // productIds: "",
      productId: "", //产品id，来自productList的第一个数组项中的id
      goodsCount: 0, //购物车当前商品数量
      messageConfig: {
        // 数据结构见下方文档
      },
      attribute: [], //商品参数
      name: "", //产品标题
      goods_brief: "", //产品叙述
      goods_desc: "", //商品信息返回html标签
      issue: [], //常见问题
      goodsList: [], //下方的相关产品

      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  created() {
    // console.log(this.$route.query);  //id
    // 获取详情页接口
    getDetail(this.$route.query).then((res) => {
      // console.log(res);
      // console.log(res.data.data.productList[0].goods_id);
      this.gallery = res.data.data.gallery;
      this.goods.picture = res.data.data.info.list_pic_url;
      this.sku.price = res.data.data.info.retail_price;
      this.sku.stock_num = res.data.data.info.goods_number;
      this.goodsId = res.data.data.info.id;
      this.productId = res.data.data.productList[0].id;
      // this.productIds = res.data.data.productList[0].goods_id;
      // console.log(this.productIds);
      this.attribute = res.data.data.attribute;
      this.name = res.data.data.info.name;
      this.goods_brief = res.data.data.info.goods_brief;
      this.goods_desc = res.data.data.info.goods_desc;
      this.issue = res.data.data.issue;
    });

    // 获取商品数量的接口
    GoSHuLIAngLogin().then((res) => {
      // console.log(res);
      // 获取当前的商品数量并赋值
      this.goodsCount = res.data.data.cartTotal.goodsCount;
    });
    getXIAngGUanDetail({ id: this.$route.query.id }).then((res) => {
      // console.log(res);
      this.goodsList = res.data.data.goodsList;
    });
  },
  methods: {
    onBuyClicked() {
      console.log(this.productIds);
      // 点击购买
    },
    onAddCartClicked() {
      // 加入购物车
      // 通过添加ref属性，用this.$refs.(设置的值).(上边的方法)就可以获取到数量了
      // console.log(this.$refs.myref.getSkuData());
      // 加入购物车的接口
      GoJiaRuLogin({
        goodsId: this.goodsId,
        productId: this.productId,
        number: this.$refs.myref.getSkuData().selectedNum,
      }).then((res) => {
        // console.log(res);

        if (res.data.errno == 0) {
          this.show = false; //添加成功隐藏面板
          // this.$toast("添加成功");
          this.$toast({
            type: "success",
            duration: 1,
            message: "添加成功",
          });
        } else {
          this.$toast({
            type: "fail",
            duration: 1,
            message: "添加失败",
          });
        }
      });
    },
    GOU() {
      // 给底部加入购物车绑定点击事件，点击后显示加入购物车面板
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.XIAngQIng {
  padding-bottom: 49px;
  box-sizing: border-box;
  h2 {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
  .xq {
    margin-bottom: 10px;
  }
  .p1 {
    color: #000000;
    font-size: 20px;
  }
  .p2 {
    color: #999;
    font-size: 20px;
  }
  img {
    width: 100%;
  }
  .padd {
    padding: 7.5px 10px;
    box-sizing: border-box;
    ul {
      margin-bottom: 3px;
    }
    li {
      background-color: #efefef;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .wenti {
    padding: 7.5px 10px;
    box-sizing: border-box;
    ul {
      li {
        font-size: 16px;
      }
    }
  }
  .left {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
  }
  .right {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
  }
}
/deep/.imgs {
  img {
    width: 100%;
  }
}
.qian {
  color: #9b0000;
}
.xiangguan {
  display: flex;
  flex-wrap: wrap;
  padding: 7.5px 10px;
  justify-content: space-between;
  ul {
    width: 48%;
  }
  img {
    width: 100%;
  }
  p {
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    font-size: 15px;
    text-align: center;
  }
  li {
    color: #9b0000;
    font-size: 15px;
    width: 100%;
    // margin-left: 40px;
    margin-left: 25%;
  }
}
</style>